<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h1>ItemList</h1>
    <div id="app">
        <table class="table">
            <th scope="col">外观</th><th scope="col">名称</th><th scope="col">描述</th><th scope="col">价格</th><th scope="col">操作</th>
            <tr v-for="item in info">
<!--                <td><img :src="item.img" @onclick="add(item.id)"/></td>-->
                <td><img :src="item.img"/></td>
                <td>{{item.itemname}}</td>
                <td>{{item.description}}</td>
                <td>{{item.price}}</td>
<!--                <td>-->
<!--                    <button type="button" id="add" :onclick="add(item.id)">添加</button>-->
<!--                </td>-->
                <td>
                    <a href="#" @click="add(item.id) ">添加</a>
                </td>
            </tr>
        </table>
    </div>

    <script>
        new Vue({
            el: '#app',
            data () {
                return {
                    info: null
                }
            },
            methods:{
                add : function (itemid) {
                    $.post("/cart/add", {"itemid":itemid}, function (data) {
                        if (data) {
                            alert("添加成功");
                        }
                    });
                }
            },
            mounted () {
                axios
                    .post('/item/list')
                    .then(response => (this.info = response.data))
            }
        })

        function add(itemid){
            $.post("/cart/add", {"itemid":itemid}, function (data) {
                if (data) {
                    alert("添加成功");
                }
            });
        }

    </script>
</body>
</html>